<template>
  <div>
    <div class="left">
      <ButtonGroup vertical>
        <Button
          :type="toolButtonState.effect"
          size="large"
          icon="md-flower"
          title="场特效"
          @click="requestDrawEffect"
        ></Button>
        <Divider />
        <vue-xlsx-table
          @on-select-file="handleExcelImport"
          title="导入Excel"
        >
          <Icon type="ios-folder-open" />
        </vue-xlsx-table>
        <Divider />
        <Button
          type="text"
          size="large"
          icon="md-archive"
          title="导出JSON文件"
          @click="exportJSON"
        ></Button>
      </ButtonGroup>
    </div>
    <div class="right">
      <keep-alive>
        <component
          :is="formComponentName"
          v-show="showForm"
          :excel-data="excelDataNode"
        ></component>
      </keep-alive>
    </div>
    <k-datatable
      v-if="showDataTable"
      :table-data="excelData"
      :current-row-index="currentExcelIndex"
    ></k-datatable>
  </div>
</template>

<script>
import config from "@/config/global";
import { busEventEmit, busEventHandle } from "@/teleport/bus";
import jsonDownloader from "@/libs/exportJSON";

export default {
  name: "",
  data() {
    return {
      showForm: false,
      showDataTable: false,
      formComponentName: "k-form-effect",
      toolButtonState: {
        effect: "text"
      },
      excelData: [],
      excelDataNode: {},
      currentExcelIndex: 0,
      result: [],
    };
  },
  components: {
    "k-form-effect": () => import("@/components/form/FormEffect"),
    "k-datatable": () => import("@/components/DataTable"),
  },
  methods: {
    requestDrawEffect() {
      if (this.toolButtonState.effect === "text") {
        this.toolButtonState.effect = "primary";
        busEventEmit("effect-draw-request"); //To AMap
      } else {
        this.toolButtonState.effect = "text";
        busEventEmit("effect-draw-cancel");
      }
    },
    handleExcelImport(data) {
      this.showDataTable = true;
      this.excelData = data.body;
      this.currentExcelIndex = 0;
      store.useExcel = true;
      store.excelLength = this.excelData.length;
    },
    listenDrawnEvent() {
      const $this = this;
      busEventHandle("effect-drawn", (msg) => {
        $this.currentExcelIndex = msg.effectCount;
        if (store.useExcel && $this.currentExcelIndex < store.excelLength) {
          $this.excelDataNode = $this.excelData[$this.currentExcelIndex];
          $this.excelDataNode.coord = msg.coord;
          $this.excelDataNode.radius = msg.radius;
        } else if (!store.useExcel) {
          $this.excelDataNode = { coord: msg.coord, radius:msg.radius };
        }
        $this.showForm = true;
      });
    },
    listenEffectEditEvent() {
      const $this = this;
      busEventHandle("effect-edit", (msg) => {
        let result = store.drawHistory.find((e) => {
          return e.getExtData().id === msg.id;
        });
        $this.showForm = true;
        result.setExtData(msg);
        busEventEmit("update-form-data", result.getExtData());
      });
    },
    exportJSON() {
      let jsonRawData = store.drawHistory.filter((e) => {
        return e.CLASS_NAME === "AMap.Circle";
      });
      let jsonResultArr = jsonRawData.map((o) => o.getExtData());
      jsonDownloader(jsonResultArr, "effect-list.json");
    },
  },
  created() {
    this.listenDrawnEvent();
    this.listenEffectEditEvent();
  },
};
</script>

<style scoped>
</style>